<template>
	<div>
		<!-- 弹窗：选择检查项目 -->
    <el-dialog 
      title="选择检查项目"
      append-to-body
      :visible.sync="checkItemDialog"
      :close-on-click-modal="false" 
      :before-close="closeCheckItemDialog"
      width="60%"
      class="check_item_dialog"
    > 

      <!-- 内容 -->
      <avue-crud 
        :option="checkOption"
        :data="checkData"
        @selection-change="checkSelectionChange"
        ref="checkCrud"
      >
      </avue-crud>

      <!-- 按钮 -->
      <div class="check_item_footer">
        <el-button 
          type="primary"
          size="small"
          @click="confirmChooseCheckItems()">
          确 定
        </el-button>
        <el-button 
          size="small"
          @click="closeCheckItemDialog()">
          取 消
        </el-button>
      </div>

    </el-dialog>
	</div>
</template>

<script>
import { getCheckItemList } from "@/api/hiddendangemanage/hiddendangercheck";
import { checkOptionColumn } from "../constant/hiddendangercheck.js";

export default {
  props: {
    checkItemDialog: {default: false},
    selectedCheckItems: {default: []}
  },
  data() {
    return {
      checkData: [],
      checkSelectionList: [],
      checkOption: {
        calcHeight: 30,
        tip: false,
        index: true,
        selection: true,
        addBtn: false,
        index: false,
        refreshBtn: false,
        columnBtn: false,
        menu: false,
        column: checkOptionColumn
      },
    }
  },
  watch: {
    checkItemDialog(){
      if(this.checkItemDialog === true){
        this.initData();
      }
    }
  },
  mounted() {
    this.initData();
  },
  methods: {

    // 初始化选择检查项目弹窗
    initData() {
      this.ciOnload();
    },

    // 获取检查项目列表
    ciOnload() {
      getCheckItemList().then(res => {
        this.checkData = res.data.data;
      }).then(() => {
        this.checkSelectedItems();
      });
    },

    // 勾选已在列表中的检查项目
    checkSelectedItems() {
      if(this.selectedCheckItems.length !== 0) {
        let itemIds = [];
        this.selectedCheckItems.forEach(item => {
          itemIds.push(item.id);
        });
        this.$nextTick(() => {
          this.checkData.forEach(row => {
            if(itemIds.indexOf(row.id) >= 0 && this.$refs.checkCrud !== undefined) {
              this.$refs.checkCrud.toggleRowSelection(row, true);
            }
          })
        });
      } else {
        if(this.$refs.checkCrud !== undefined) {
          this.$refs.checkCrud.toggleSelection();
        }
      }
    },

    // 勾选检查项目
    checkSelectionChange(list) {
      this.checkSelectionList = list;
    },

    // 确定选择检查项目
    confirmChooseCheckItems() {
      if(this.checkSelectionList.length === 0) {
        this.$message.warning("请选择至少一个检查项目!");
        return;
      }
      this.$emit('confirmChooseCheckItems', this.checkSelectionList);
    },

    // 关闭、取消选择检查项目弹窗
    closeCheckItemDialog() {
      this.$emit('closeCheckItemDialog');
    }

  }
}
</script>

<style lang="scss" scoped>
.check_item_footer {
  text-align: center;
  margin-top: 15px;

  .el-button {
    width: 100px;
    height: 35px;
  }
}
</style>